<template>
	<view class="template-integral tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>


		<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}"
			style="background: linear-gradient(180deg, #3796EC, #f3ffff);">
			<view class="tn-padding-top title-box">
				<view class="info-title">
					项目详情
				</view>
				<view class="item-row">
					<view class="item-content">
						<text class="title">
							项目名称：
						</text>
						<text class="">
							张三
						</text>
					</view>
					<view class="item-content">
						<text class="title">
							项目编号：
						</text>
						<text class="">
							2104623
						</text>
					</view>
				</view>
				<view class="item-row">
					<view class="item-content">
						<text class="title">
							位置：
						</text>
						<text class="">
							拱墅区
						</text>
					</view>
					<view class="item-content">
						<text class="title">
							项目负责人：
						</text>
						<text class="">
							李响
						</text>
					</view>
				</view>
				<view class="item-row">
					<view class="item-content">
						<text class="title">
							分配时间：
						</text>
						<text class="">
							2023-12-24 16:10:10
						</text>
					</view>
					<view class="item-content">
						<text class="title">
							项目状态：
						</text>
						<text class="">
							{{type == 0?"完成":type == 1?'评估中':'拒绝改造'}}
						</text>
					</view>
				</view>
				<view class="item-row">
					<view class="item-content">
						<text class="title">
							备注：
						</text>
						<text class="">
							xxx
						</text>
					</view>

				</view>

			</view>
		</view>

		<!-- 边距间隔 -->
		<view class="tn-strip-bottom"></view>

		<view class="tn-padding-top-sm tn-padding-bottom-sm content">
			<view class="info-title">
				项目进度
			</view>
			<view class="time-line__wrap" v-if="type ==0">
				<tn-time-line>
					<block v-for="(item, index) in projectData0" :key="index">
						<tn-time-line-item :top="item.status === 0 ? '' : 2">
							<template v-if="item.status !== 0" slot="node">
								<view class="time-line-item__node">
									<view v-if="item.status === 1"
										class="time-line-item__node--icon tn-icon tn-icon-image-text"></view>
									<view v-if="item.status === 2"
										class="time-line-item__node--icon tn-icon tn-icon-prize"></view>
									<view v-if="item.status === 3"
										class="time-line-item__node--icon tn-icon tn-icon-gift"></view>
									<view v-if="item.status === 4"
										class="time-line-item__node--icon tn-icon tn-icon-logistics"></view>
									<view v-if="item.status === 5"
										class="time-line-item__node--icon tn-icon tn-icon-my"></view>
									<view v-if="item.status === 6"
										class="time-line-item__node--icon tn-icon tn-icon-cardbag"></view>
									<view v-if="item.status === 7"
										class="time-line-item__node--icon tn-icon tn-icon-success"></view>
								</view>
							</template>
							<template slot="content">
								<view>
									<view class="time-line-item__content__title">{{item.info}}</view>
									<view class="time-line-item__content__desc" v-if="item.user">
										负责人：{{ item.user }}</view>
									<view class="time-line-item__content__time">{{ item.time }}</view>
									<view class="time-line-item__content__time">{{ item.result }}</view>
								</view>
							</template>
						</tn-time-line-item>
					</block>
				</tn-time-line>
			</view>
			<view class="time-line__wrap" v-if="type ==1">
				<tn-time-line>
					<block v-for="(item, index) in projectData1" :key="index">
						<tn-time-line-item :top="item.status === 0 ? '' : 2">
							<template v-if="item.status !== 0" slot="node">
								<view class="time-line-item__node">
									<view v-if="item.status === 1"
										class="time-line-item__node--icon tn-icon tn-icon-image-text"></view>
									<view v-if="item.status === 2"
										class="time-line-item__node--icon tn-icon tn-icon-prize"></view>
									<view v-if="item.status === 3"
										class="time-line-item__node--icon tn-icon tn-icon-gift"></view>
									<view v-if="item.status === 4"
										class="time-line-item__node--icon tn-icon tn-icon-logistics"></view>
									<view v-if="item.status === 5"
										class="time-line-item__node--icon tn-icon tn-icon-my"></view>
									<view v-if="item.status === 6"
										class="time-line-item__node--icon tn-icon tn-icon-cardbag"></view>
									<view v-if="item.status === 7"
										class="time-line-item__node--icon tn-icon tn-icon-success"></view>
								</view>
							</template>
							<template slot="content">
								<view>
									<view class="time-line-item__content__title">{{item.info}}</view>
									<view class="time-line-item__content__desc" v-if="item.user">
										负责人：{{ item.user }}</view>
									<view class="time-line-item__content__time">{{ item.time }}</view>
									<view class="time-line-item__content__time">{{ item.result }}</view>
								</view>
							</template>
						</tn-time-line-item>
					</block>
				</tn-time-line>
			</view>
			<view class="time-line__wrap" v-if="type ==2">
				<tn-time-line>
					<block v-for="(item, index) in projectData2" :key="index">
						<tn-time-line-item :top="item.status === 0 ? '' : 2">
							<template v-if="item.status !== 0" slot="node">
								<view class="time-line-item__node">
									<view v-if="item.status === 1"
										class="time-line-item__node--icon tn-icon tn-icon-image-text"></view>
									<view v-if="item.status === 2"
										class="time-line-item__node--icon tn-icon tn-icon-prize"></view>
									<view v-if="item.status === 3"
										class="time-line-item__node--icon tn-icon tn-icon-gift"></view>
									<view v-if="item.status === 4"
										class="time-line-item__node--icon tn-icon tn-icon-logistics"></view>
									<view v-if="item.status === 5"
										class="time-line-item__node--icon tn-icon tn-icon-my"></view>
									<view v-if="item.status === 6"
										class="time-line-item__node--icon tn-icon tn-icon-cardbag"></view>
									<view v-if="item.status === 7"
										class="time-line-item__node--icon tn-icon tn-icon-success"></view>
								</view>
							</template>
							<template slot="content">
								<view>
									<view class="time-line-item__content__title">{{item.info}}</view>
									<view class="time-line-item__content__desc" v-if="item.user">
										负责人：{{ item.user }}</view>
									<view class="time-line-item__content__time">{{ item.time }}</view>
									<view class="time-line-item__content__result">{{ item.result }}</view>
								</view>
							</template>
						</tn-time-line-item>
					</block>
				</tn-time-line>
			</view>

			<view class="info-title" v-if="type == 0">
				施工计划
			<!-- 	<tn-button backgroundColor="tn-bg-blue" fontColor="tn-color-white" style="float: right;"
					@click="showModal">新增</tn-button> -->
			</view>
			<view class="time-line__wrap" v-if="type == 0">
				<tn-time-line>
					<block v-for="(item, index) in expressData" :key="index">
						<tn-time-line-item :top="item.status === 0 ? '' : 2">
							<template v-if="item.status !== 0" slot="node">
								<view class="time-line-item__node noColor">
									<view class="time-line-item__node--icon tn-icon tn-icon-image-text "></view>

								</view>
							</template>
							<template slot="content">
								<view>
									<view class="time-line-item__content__title">{{item.info}}</view>
									<view class="time-line-item__content__desc" v-if="item.status !== 7">
										负责人：{{ item.user }}</view>
									<view class="time-line-item__content__time">{{ item.time }}</view>
								</view>
							</template>
						</tn-time-line-item>
					</block>
				</tn-time-line>
			</view>

			<view class="info-title" v-if="type == 0">
				施工进度
			</view>
			<view class="time-line__wrap" v-if="type == 0">
				<tn-time-line>
					<block v-for="(item, index) in expressData" :key="index">
						<tn-time-line-item :top="item.status === 0 ? '' : 2">
							<template v-if="item.status !== 0" slot="node">
								<view class="time-line-item__node">
									<view v-if="item.status === 1"
										class="time-line-item__node--icon tn-icon tn-icon-image-text"></view>
									<view v-if="item.status === 2"
										class="time-line-item__node--icon tn-icon tn-icon-prize"></view>
									<view v-if="item.status === 3"
										class="time-line-item__node--icon tn-icon tn-icon-gift"></view>
									<view v-if="item.status === 4"
										class="time-line-item__node--icon tn-icon tn-icon-logistics"></view>
									<view v-if="item.status === 5"
										class="time-line-item__node--icon tn-icon tn-icon-my"></view>
									<view v-if="item.status === 6"
										class="time-line-item__node--icon tn-icon tn-icon-cardbag"></view>
									<view v-if="item.status === 7"
										class="time-line-item__node--icon tn-icon tn-icon-success"></view>
								</view>
							</template>
							<template slot="content">
								<view>
									<view class="time-line-item__content__title">{{item.info}}</view>
									<view class="time-line-item__content__desc" v-if="item.status !== 7">
										负责人：{{ item.user }}</view>
									<view class="time-line-item__content__time">{{ item.time }}</view>
								</view>
							</template>
						</tn-time-line-item>
					</block>
				</tn-time-line>
			</view>
		</view>


		<!-- 更多信息-->
		<!-- <view class="tn-padding-top-sm tn-padding-bottom-sm">
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">订单编号</view>
					<view class="tn-margin-left-sm" style="font-size: 28rpx;">{{orderDetail.order_code}}</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">费用</view>
					<view class="tn-margin-left-sm tn-margin-right" style="font-size: 28rpx;">{{orderDetail.price}}元
					</view>
					<tn-button backgroundColor="tn-bg-blue" fontColor="tn-color-white"
						@click="showModal">修改价格</tn-button>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">联系电话</view>
					<view class="tn-margin-left-sm" style="font-size: 28rpx;">{{orderDetail.mobile}}</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">服务地点</view>
					<view class="tn-margin-left-sm" style="font-size: 28rpx;">{{orderDetail.hospital}}</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">服务时长</view>
					<view class="tn-margin-left-sm" style="font-size: 28rpx;">1天</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34" v-if="type != 1">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">护工名称</view>
					<view class="tn-margin-left-sm" style="font-size: 28rpx;">{{orderDetail.worker_name}}</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">订单创建时间</view>
					<view class="tn-margin-left-sm" style="font-size: 28rpx;">{{orderDetail.createTime}}</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34" v-if="type != 1">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">服务开始时间</view>
					<view class="tn-margin-left-sm" style="font-size: 28rpx;">{{orderDetail.start_time}}</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34" v-if="type == 3">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">服务结束时间</view>
					<view class="tn-margin-left-sm" style="font-size: 28rpx;">{{orderDetail.end_time}}</view>
				</view>
			</tn-list-cell>
		</view> -->

		<!-- 边距间隔 -->
		<!-- <view class="tn-strip-bottom"></view> -->


		<!-- <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs"
			v-for="(item, index) in setList" :key="index" @click="tn(item.url)">
			<view class="justify-content-item">
				<view class="tn-text-bold tn-text-lg">
					{{ item.title }}
				</view>
			</view>
			<view class="justify-content-item tn-text-lg tn-color-grey">
				<view class="tn-icon-right"></view>
			</view>
		</view> -->

		<!-- 边距间隔 -->
		<!-- <view class="tn-strip-bottom"></view> -->

		<!-- 悬浮按钮-->
		<!-- 		<view class="tn-flex tn-footerfixed">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
				<tn-button backgroundColor="#fc0004" padding="40rpx 0" style="margin-right: 25rpx;" width="40%" shadow
					fontBold @tap="upload(type)">
					<text class="tn-color-white" v-if="type == 1 || type ==2">取消订单</text>
				</tn-button>
				<tn-button backgroundColor="#3668FC" padding="40rpx 0" width="40%" shadow fontBold @tap="upload(type)">
					<text class="tn-color-white" v-if="type == 1">分配护工</text>
					<text class="tn-color-white" v-if="type == 2"><text class="tn-icon-scan"></text>立即扫码</text>
				</tn-button>
			</view>
		</view> -->

		<tn-modal v-model="modelShow" :custom="true" :showCloseBtn="true">
			<view class="custom-modal-content tn-flex-direction-column">
				<view class="">
					<view class="tn-text-lg tn-text-bold tn-color-purplered tn-text-center tn-padding">新增施工计划</view>
					<view class="tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 0 0 0 0;">
						<input placeholder="请输入施工内容" name="input" placeholder-style="color:#AAAAAA"
							maxlength="20"></input>

					</view>
					<view class="tn-bg-gray--light"
						style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 20rpx 0 20rpx 0;">
						<input placeholder="选择时间" name="input" placeholder-style="color:#AAAAAA" maxlength="20"></input>

					</view>
					<view class="tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 0 0 0 0;">
						<!-- <input placeholder="选择负责人" name="input" placeholder-style="color:#AAAAAA"
							maxlength="20"></input> -->
						<tn-input v-model="value" placeholder="选择负责人" :type="type" @click="show = true" />
						<tn-action-sheet :list="actionSheetList" v-model="show"
							@click="actionSheetCallback"></tn-action-sheet>

					</view>

				</view>
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
					<tn-button backgroundColor="#3668FC" padding="40rpx 0" width="60%" shadow fontBold>
						<text class="tn-color-white">保 存</text>
					</tn-button>
				</view>
			</view>
		</tn-modal>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateIntegral',
		mixins: [template_page_mixin],
		data() {
			return {
				type: 0,
				modelShow: false,
				projectData0:[{
						info: '申请',
						status: 7,
						time: '2023-7-2 17:07'
					},
					{
						info: '评估',
						user: '李洋',
						status: 7,
						time: '2023-7-3 17:15'
					},{
						info: '方案提交',
						user: '李洋',
						status: 7,
						time: '2023-7-4 17:07'
					},
					{
						info: '方案通过',
						status: 7,
						time: '2023-7-6 17:15'
					},{
						info: '施工',
						status: 7,
						time: '2023-7-8 17:07'
					},
					{
						info: '验收，交工',
						status: 2,
						time: '2023-7-20 17:15'
					}],
				projectData1:[{
						info: '申请',
						status: 7,
						time: '2023-7-2 17:07'
					},
					{
						info: '评估',
						user: '李洋',
						status: 2,
						time: '2023-7-3 17:15'
					},
					],
					projectData2:[{
							info: '申请',
							status: 7,
							time: '2023-7-2 17:07'
						},
						{
							info: '评估',
							result: '评估结果：无法改造',
							user: '李洋',
							status: 2,
							time: '2023-7-3 17:15'
						},
						],
				expressData: [{
						info: '验收，交工',
						status: 7,
						time: '2023-7-20 17:07'
					},
					{
						info: '安装护理床，智能居家检测设备',
						user: '李洋',
						status: 1,
						time: '2023-7-7 17:15'
					},
					{
						info: '卧室铺设防滑地胶',
						user: '李洋',
						status: 1,
						time: '2023-7-6 17:31'
					},
					{
						info: '卫生间铺设防滑地砖',
						user: '李洋',
						status: 1,
						time: '2023-7-5 18:31'
					},
					{
						info: '拆除设备',
						user: '李洋',
						status: 1,
						time: '2023-7-5 17:42'
					},

				],
				type: 'select',
				show: false,
				border: true,
				actionSheetList: [{
						text: '李洋'
					},
					{
						text: '李响'
					},
					{
						text: '陶艺'
					}
				],
				orderDetail: {
					area: "浙江省,绍兴市,上虞区",
					bed: "8东1",
					createTime: "2024-05-22 10:49:37",
					end_time: "2024/05/22",
					hospital: "绍兴市上虞中医医院(城南新院)",
					id: 5682,
					mobile: "13587380082",
					name: "蒋炳甫",
					office: "通用科室",
					orderStatus: "已完成，已结清",
					order_code: "202405220022",
					payStatus: null,
					price: "180.00",
					serviceDayCount: 1,
					start_time: "2024/05/22",
					status: 4,
					surplus: "0",
					userName: "桑君华",
					workerId: null,
					worker_name: "胡小娟",
					type: "助洁"
				},
				setList: [{
						title: "版权所属",
						url: "/minePages/content",
					},
					{
						title: "使用协议",
						url: "/minePages/content",
					},
					{
						title: "隐私政策",
						url: "/minePages/content",
					},
					{
						title: "帮助中心",
						url: "/minePages/help",
					},
					{
						title: "版本更新",
						url: "/minePages/version",
					}
				]
			}
		},
		onLoad(option) {
			console.log(option.type)
			this.type = option.type
		},
		methods: {
			upload(type) {
				if (type == 2) {
					this.openQrcode()
				}
			},
			showModal() {
				this.modelShow = true
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 页面 start*/
	.integral-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 阴影 start*/
	.tn-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.integral-wrap {
		position: relative;
		z-index: 1;
	}

	/* 页面 end*/

	/* 翘边阴影*/
	.shadow-warp {
		position: relative;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.01);
	}

	.shadow-warp:before,
	.shadow-warp:after {
		position: absolute;
		content: "";
		top: 20rpx;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
		transform: rotate(-3deg);
		z-index: -1;
	}

	.shadow-warp:after {
		right: 20rpx;
		left: auto;
		transform: rotate(3deg);
	}

	// 银行卡
	.button-vip {
		width: 100%;
		height: 150rpx;
		border-radius: 15rpx;
		position: relative;
		z-index: 1;

		&::after {
			content: " ";
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			left: 0;
			bottom: 0;
			border-radius: inherit;
			opacity: 1;
			transform: scale(1, 1);
			background-size: 100% 100%;
			background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
		}
	}


	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/
	/* 二维码弹窗 */
	.custom-modal-content {
		display: flex;
		justify-content: center;
	}

	.title-box {
		width: 90%;
		margin: auto;
		height: 485rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 10rpx;

		.item-row {
			.title {
				color: #7a7a7b;
				margin: 10rpx;
				width: 200rpx;
				display: inline-block;
			}

		}
	}

	.content {
		padding: 20rpx;
	}

	.tn-time-line-class {
		.tn-time-line-item-class {

			// &:first-child {
			.tn-time-line-item__node {
				.time-line-item__node {
					background-color: $tn-main-color !important;
				}

				.noColor {
					background-color: #AAAAAA !important,
				}
			}

			// }
		}
	}

	.time-line {

		&__wrap {
			padding: 30rpx;
		}

		&-item {
			&__node {
				width: 44rpx;
				height: 44rpx;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #AAAAAA;

				&--active {
					background-color: $tn-main-color;
				}

				&--icon {
					color: #FFFFFF;
					font-size: 24rpx;
				}
			}

			&__content {
				&__title {
					font-weight: bold;
					font-size: 32rpx;
				}

				&__desc {
					color: $tn-font-sub-color;
					font-size: 28rpx;
					margin-bottom: 6rpx;
				}

				&__time {
					color: $tn-color-gray;
					font-size: 26rpx;
				}
				
				&__result {
					color: $tn-color-red;
					font-size: 26rpx;
					font-weight: 600;
				}
			}
		}
	}
</style>